<template>
	<div>
		<!-- 头部logo -->
		<div class="head-logo" v-if="onlyChannel === 'zgyh' || onlyChannel === 'zgyhpx'">
			<img src='./../assets/images/zyzbj.png'>
		</div>
		<!-- 中信信用卡 -->
		<div class="head-logo head-logo-zxxykzx" v-if="onlyChannel === 'zxxykzx' && getDevice != 'app'">
			<img src='./../assets/images/zxxyk.png'>
		</div>
		<!--光大银行机构号gdyh2增加logo-->
		<div class="head-logo" v-if="onlyChannel === 'gdyh2'">
			<img class="gdyh2-logo" src='./../assets/images/gd-logo.jpg'>
		</div>
		<div class="head-logo" v-if="onlyChannel === 'gdkj'">
			<img class="gdkj-logo" src='./../assets/images/gdkj-logo.jpg'>
		</div>
		<div class="home-banner" v-if="banner.length > 0">
			<swiper :options="swiperOption" class="sw">
				<swiper-slide v-for="(v, index) in banner" :key="index">
					<!--banner 用了v-lazy渲染的比较慢改成之前src-->
					<!--<img v-lazy="v.coverImagUrl" @click="clickBannerImg(v.type,v.imagUrl,v.link,v.id)" />-->
					<img :src="v.coverImagUrl + '?x-oss-process=image/resize,m_fixed,h_236,w_750'"
						@click="clickBannerImg(v.type, v.imagUrl, v.link, v.id)" />
				</swiper-slide>
				<div v-if="banner.length > 1" class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
	</div>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			banner: [],
			getDevice: fun.getPlatform(),//微信 app
			onlyChannel: this.$channel,
			swiperOption: {
				autoplay: {
					delay: 5000,
					stopOnLastSlide: false,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
				},
			}
		};
	},
	computed: {
		sysInfo() {
			return this.$store.state.SysOrgInfo;
		}
	},
	created() {
		this.getBanner();
	},
	methods: {
		//获取banner
		getBanner() {
			this.$http
				.get("/h5live/getAdList")
				.then(res => {
					if (res.data.code == "000000") {
						this.banner = res.data.data;
					}
				})
				.catch(response => {

				});
		},
		dotNum(id) { //统计
			let _this = this;
			var argumentData = {
				sessionId: "homeBanner" + id, //场次id
				streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
				actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
				playSource: fun.getPlatform(), //微信 app
				url: window.location.href, //当前的url
			};
			_this.$http.post("/h5live/recordData", argumentData, {
				headers: {
					"Content-Type": "application/json"
				}
			})
				.then(
					res => {
						//console.log(res)
					},
					err => {
						console.log(err);
					}
				);
			if (this.$channel === 'gyzq') {
				TalkingData.onPage("c_zbsylbt_01")
			}
		},
		//banner 跳转
		clickBannerImg(type, imgLink, urlLink, id) { //banner 的id  
			this.dotNum(id);
			switch (type) {
				case 1:
					this.$store.dispatch("dispatchBannerImgLink", imgLink)
					this.$router.push(`/${this.$channel}/bannerLink`);
					break;
				case 2:
					if (window.terminal.isZxjtqhApp) {
						fun.zxjtqhLinkUrl(url)
					} else {
						window.location.href = urlLink;
					}
					break;
				default:
					break;
			}
		}
	},
	components: {}
};
</script>

<style>
/* 头部 */

.h-banner {
	width: 100%;
	height: 328px;
}

.cube-slide-item .h-banner-img img {
	width: 100%;
	height: 318px;
}

.h-ing-title {
	padding: 5px 30px 15px 30px;
	display: flex;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 3px 9px 1px rgba(204, 151, 152, 0.1);
	align-items: center;
}

.h-ing-title img {
	width: 70px;
	height: 70px;
}

.h-i-info {
	margin-left: 24px;
}

.info-name {
	font-size: 22px;
	/* margin-bottom: 12px;
  margin-top: 6px; */
	font-weight: bold;
}

.info-nowPageNum {
	font-size: 20px;
}

.h-banner .cube-slide-dots>span {
	margin: 0 2px;
	width: 28px;
	height: 3px;
}

.head-logo {
	padding: 12px 0;
	width: 100vw;
}

.head-logo img {
	width: 237px;
	height: 68px;
	display: block;
	margin: 0 auto;
}

.head-logo-zxxykzx img {
	width: 240px;
}

.home-banner {
	position: relative;
}

.home-banner a {
	width: 100%;
	display: inline-block;
}

.home-banner img {
	width: 100%;
	height: 236px;
}

.sw {
	/* height: 236px; */
}

.gdyh2-logo {
	width: 311px !important;
	height: 95px !important;
}

.gdkj-logo {
	width: 275px !important;
	height: 48px !important;
}

/* 
 .h-t-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 62px; 
  background: url(./../assets/images/h-t-title.png) no-repeat;
  background-size: 750px;
  padding: 0 30px;
}

.h-t-title img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}
.h-t-info {
  font-size: 32px;
  color: #0c0c0c;
  margin-left: 16px;
  font-weight: bold;
  display: flex;
  flex: 1;
  justify-content: space-between;
} */
</style>